<template>
    <div class="app-container">
        <div class="SearchTop">
            <el-form :model="queryParams" ref="queryRef" :inline="true">
                <el-form-item label="关键字搜索：">
                    <el-input v-model="queryParams.keyWord" placeholder="请输入" clearable @keyup.enter="handleQuery" />
                </el-form-item>
                <el-form-item label="文章分组：">
                    <el-select v-model="queryParams.resourceGroupId" placeholder="筛选文章分组" clearable
                        @change="onChangeGroup">
                        <el-option v-for="item in group" :key="item.id" :label="item.nodeAllTreeName"
                            :value="item.id" />
                    </el-select>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" icon="Search" @click="handleQuery" v-hasPermi="['article:basic:list2']">查询
                    </el-button>
                    <el-button icon="Refresh" @click="resetQuery">重置</el-button>
                </el-form-item>
                <el-form-item class="right_btn">
                    <el-button type="primary" plain icon="Plus" @click="handleAdd" v-hasPermi="['article:basic:add']">
                        新增
                    </el-button>
                    <el-button type="danger" plain icon="Delete" :disabled="multiple" @click="handleDelete"
                        v-hasPermi="['article:basic2:alter-status']">删除
                    </el-button>
                </el-form-item>
            </el-form>
        </div>
        <!--表格数据-->
        <div class="tableList articlesList">
            <el-table :data="tableData" v-loading="loading" style="width: 100%" border class="table-container"
                align="center" @selection-change="handleSelectionChange" @sort-change="handleSortChange"
                :default-sort="{ prop: 'releaseTime', order: 'descending' }" height="640">
                <el-table-column type="selection" width="55"> </el-table-column>
                <el-table-column label="序号" width="60" type="index"> </el-table-column>
                <template v-for="(item, index) in tableHead" :key="index">
                    <el-table-column :prop="item.dataIndex" :label="item.title" :align="center" :sortable="item.sort"
                        :sort-orders="['ascending', 'descending']" :width="item.width">
                        <template #default="scope">
                            <template v-if="item.dataIndex == 'mediaUrl'">
                                <span class="mediaImg"><img :src="scope.row.mediaUrl" /></span>
                            </template>

                            <template v-if="item.dataIndex == 'title'">
                                <el-tooltip effect="dark" placement="top-start" v-if="!showTitle"
                                    :content="scope.row.title">
                                    <span class="toEllipsis title" @mouseover="onShowNameTipsMouseenter">{{
                                    scope.row.title
                                    }}</span>
                                </el-tooltip>
                                <el-tooltip v-if="!showTitle" effect="dark" placement="top-start"
                                    :content="scope.row.subtitle">
                                    <span class="toEllipsis subtitle"
                                        @mouseover="onShowNameTipsMouseenter">{{scope.row.subtitle}}</span>
                                </el-tooltip>
                                <template v-if="showTitle">
                                    <span class="toEllipsis title" @mouseover="onShowNameTipsMouseenter">{{
                                    scope.row.title}}</span>
                                    <span class="toEllipsis subtitle"
                                        @mouseover="onShowNameTipsMouseenter">{{scope.row.subtitle}}</span>
                                </template>


                            </template>
                            <template v-if="item.dataIndex == 'summary'">
                                <el-tooltip effect="dark" v-if="!showTitle" placement="top-start"
                                    :content="scope.row.summary">
                                    <span class="toEllipsis" @mouseover="onShowNameTipsMouseenter">
                                        {{scope.row.summary}}</span>
                                </el-tooltip>
                                <template v-if="showTitle">
                                    <span class="toEllipsis"
                                        @mouseover="onShowNameTipsMouseenter">{{scope.row.summary}}</span>
                                </template>

                            </template>
                            <template v-if="item.dataIndex == 'releaseTime'">
                                <el-tooltip effect="dark" v-if="!showTitle" placement="top-start"
                                    :content="scope.row.releaseTime">
                                    <span class="toEllipsis" @mouseover="onShowNameTipsMouseenter">
                                        {{scope.row.releaseTime}}</span>
                                </el-tooltip>
                                <template v-if="showTitle">
                                    <span class="toEllipsis"
                                        @mouseover="onShowNameTipsMouseenter">{{scope.row.releaseTime}}</span>
                                </template>

                            </template>
                            <template v-if="item.dataIndex =='resourceGroupName'">
                                <el-tooltip effect="dark" v-if="!showTitle" placement="top-start"
                                    :content="scope.row.resourceGroupName">
                                    <span class="toEllipsis" @mouseover="onShowNameTipsMouseenter">
                                        {{scope.row.resourceGroupName}}</span>
                                </el-tooltip>
                                <template v-if="showTitle">
                                    <span class="toEllipsis"
                                        @mouseover="onShowNameTipsMouseenter">{{scope.row.resourceGroupName}}</span>
                                </template>
                            </template>
                            <template v-if="item.dataIndex =='readingCnt'">
                                <el-tooltip effect="dark" v-if="!showTitle" placement="top-start"
                                    :content="scope.row.readingCnt">
                                    <span class="toEllipsis" @mouseover="onShowNameTipsMouseenter">
                                        {{scope.row.readingCnt}}</span>
                                </el-tooltip>
                                <template v-if="showTitle">
                                    <span class="toEllipsis"
                                        @mouseover="onShowNameTipsMouseenter">{{scope.row.readingCnt}}</span>
                                </template>
                            </template>
                            <template v-if="item.dataIndex == 'qrCode'">
                                <el-tooltip placement="top">
                                    <template #content>
                                        <span class="bigCode">
                                            <QrCode :value="scope.row.qrCode" size="120" level="H" class="codeBox">
                                            </QrCode>
                                        </span>

                                    </template>
                                    <span class="qrCode">
                                        <QrCode :value="scope.row.qrCode" :size="size" level="H" class="codeBox">
                                        </QrCode>
                                    </span>
                                </el-tooltip>
                            </template>
                            <template v-if="item.dataIndex == 'articleStatus'">
                                <span class="articleStatus">
                                    <el-switch v-model="scope.row.articleStatus" :active-value="1" :inactive-value="2"
                                        @click="handleStatusChange(scope.row)">
                                    </el-switch>
                                    <span v-if="scope.row.articleStatus == 1">已发布</span>
                                    <span v-else>暂停发布
                                    </span>
                                    <span v-if="scope.row.articleStatus == 2" @click="handleEdit(scope.row)"
                                        class="articleEdit" v-hasPermi="['article:basic:details']">修改文章</span>
                                </span>


                            </template>
                        </template>
                    </el-table-column>
                </template>
            </el-table>

            <pagination v-show="total > 0" :total="total" v-model:page="queryParams.pageNum"
                v-model:limit="queryParams.pageSize" @pagination="getList" />
        </div>
    </div>
</template>
<script setup>
import QrCode from 'qrcode.vue'
import { articleList, articleList2, updateArticleStatus } from "@/api/CMS/article"
const { proxy } = getCurrentInstance();
const loading = ref(true);
const ids = ref([]);
const single = ref(true);
const multiple = ref(true);
const total = ref(0);
const route = useRoute();
const router = useRouter();
const group = ref([])
const status = ref('')
let size = ref(80)
const showTitle = ref(true)
const data = reactive({
    queryParams: {
        pageNum: 1,
        pageSize: 10,
        keyWord: undefined,
        resourceGroupId: undefined,
        nodeType: 2,
        "sort.releaseTime": null,
        "sort.readingCnt": null,
        "sort.thumbsUpCnt": null
    },
    tableHead: [
        {
            dataIndex: 'mediaUrl',
            title: '封面',
            sort: false,
            tooltip: false,
            width: 180
        },

        {
            dataIndex: 'title',
            title: '标题.副标题',
            sort: false,

        },
        {
            dataIndex: 'summary',
            title: '摘要',
            sort: false,

        },
        {
            dataIndex: 'releaseTime',
            title: '发布时间',
            sort: 'custom',

        },
        {
            dataIndex: 'readingCnt',
            title: '阅读量',
            sort: 'custom',

            width: 100
        },
        {
            dataIndex: 'thumbsUpCnt',
            title: '点赞数',
            sort: 'custom',

            width: 100
        },
        {
            dataIndex: 'resourceGroupName',
            title: '文章分组',
            sort: false,

        },
        {
            dataIndex: 'source',
            title: '文章来源',
            sort: false,

        },
        {
            dataIndex: 'qrCode',
            title: '扫码预览',
            sort: false,
            tooltip: false,
            width: 100
        },
        {
            dataIndex: 'articleStatus',
            title: '文章状态',
            sort: false,
            tooltip: false
        }
    ],
    tableData: [],

});

const { queryParams, tableHead, tableData } = toRefs(data);

// 溢出隐藏
function onShowNameTipsMouseenter(e) {
    var target = e.target;
    let textLength = target.clientWidth;
    let containerLength = target.scrollWidth;
    //   console.log('textLength',textLength)
    //    console.log('containerLength',containerLength)
    if (textLength < containerLength) {
        // 溢出了
        showTitle.value = false;
    } else {
        showTitle.value = true;
    }
}
/** 搜索按钮操作 */
function handleQuery() {
    queryParams.value.pageNum = 1;
    getList();
}

function handleSortChange({ column }) {    //order值（ascending、descending、null）对应不同的排序方式
    console.log('order', column)
    if (column.order === 'ascending' && column.property === 'releaseTime') {
        queryParams.value['sort.releaseTime'] = true;
    };
    if (column.order === 'descending' && column.property === 'releaseTime') {
        queryParams.value['sort.releaseTime'] = false;
    };
    if (column.order === 'ascending' && column.property === 'readingCnt') {
        queryParams.value["sort.readingCnt"] = true;
    };
    if (column.order === 'descending' && column.property === 'readingCnt') {
        queryParams.value["sort.readingCnt"] = false;
    };
    if (column.order === 'ascending' && column.property === 'thumbsUpCnt') {
        queryParams.value["sort.thumbsUpCnt"] = true;
    };
    if (column.order === 'descending' && column.property === 'thumbsUpCnt') {
        queryParams.value["sort.thumbsUpCnt"] = false;
    }
    queryParams.value.pageNum = 1;
    getList();
}
/** 查询列表 */
function getList() {
    loading.value = true;
    queryParams.value.pageSize = 10
    articleList2(queryParams.value).then(response => {
        //  console.log('list', response)
        if (response.code == 200) {
            tableData.value = response.rows
            total.value = response.total;
            loading.value = false;
        }
    })
}
/***分组列表 */
function getGroup() {
    queryParams.value.pageNum = null
    queryParams.value.pageSize = null
    articleList(queryParams.value).then(response => {
        console.log('response', response)
        group.value = response.rows
    })
}
function onChangeGroup(val) {
    queryParams.value.resourceGroupId = val
}
/** 重置按钮操作 */
function resetQuery() {
    queryParams.value = {

    }
    proxy.resetForm("queryRef");
    handleQuery();
}
function handleAdd() {
    // / contentManage / articleMaterialCenter / articles - add

    router.push({ path: "/contentManage/articleMaterialCenter/articles-add/index", query: { type: 1 } });
}

/** 多选框选中数据 */
function handleSelectionChange(selection) {
    ids.value = selection.map(item => item.id);
    single.value = selection.length != 1;
    multiple.value = !selection.length;
}
/** 状态修改  */
function handleStatusChange(row) {
    let text = row.articleStatus === 1 ? "发布" : "暂停发布";
    const ids = []
    ids.push(row.id)
    let alterStatus = ''
    proxy.$modal.confirm('确认要"' + text + '""' + row.title + '"这篇文章吗?').then(function () {
        if (row.articleStatus == 1) {
            status.value = 'RESET_RELEASED'
        }
        if (row.articleStatus == 2) {
            status.value = 'SUSPEND_RELEASED'
        }
        alterStatus = status.value
        return updateArticleStatus(ids, alterStatus);
    }).then(() => {
        proxy.$modal.msgSuccess(text + "成功");
    }).catch(function () {
        row.articleStatus = row.articleStatus === 2 ? 1 : 2;
    })
}


function handleEdit(row) {
    const articleId = row.id;
    router.push({ path: "/contentManage/articleMaterialCenter/articles-add/index", query: { articleId: articleId, type: 1 } });
}
function handleDelete() {
    const Articleids = ids.value;
    let alterStatus = 'SOFT_REMOVE'
    proxy.$modal.confirm('是否确认删除此文章？').then(function () {
        return updateArticleStatus(Articleids, alterStatus);
    }).then(() => {
        getList();
        proxy.$modal.msgSuccess("删除成功");
    }).catch(() => { });

}
getGroup()
getList()
</script>